{% extends "base.html" %}

{% block head %}
    <script type="text/javascript">
    //<![CDATA[

        function newGame() {
            var form = document.getElementById("gameform");
            var dialog = document.getElementById("gameform_dialog");
            DialogBox.instance().show(dialog, function() {
                form["type"].focus();
            });
        }

        function updateHighlight(checkbox, row) {
            if (checkbox.checked) row.style.backgroundColor = "#ffffcc";
            else row.style.backgroundColor = "white";
        }

    //]]>
    </script>
    <script src="/static/js/browser.js" type="text/javascript"></script>
    <script src="/static/js/dialog.js" type="text/javascript"></script>
    <script src="/static/js/dom.js" type="text/javascript"></script>
    <script src="/static/js/drag.js" type="text/javascript"></script>
    <script src="/static/js/event.js" type="text/javascript"></script>
    <script src="/static/js/io.js" type="text/javascript"></script>
    <script src="/static/js/lang.js" type="text/javascript"></script>
    <script src="/static/js/offscreen.js" type="text/javascript"></script>
{% endblock %}

{% block body %}

    <form action="/action/" method="post">
        <div class="inbox">
            <input type="hidden" name="next" value="{{ request.uri|escape }}"/>
            <div class="menu">
                <span class="item">
                    <a href="javascript:newGame()">Новая игра</a>
                </span>
            </div>
            <div class="buttons top">
                <div class="left corner"></div>
                <div class="right corner"></div>
            </div>
            <div class="table">
                <table>
                    <tr>
                        <th class="checkbox"></th>
                        <th>Текущие игры</th>
                        <th>Игроки</th>
                        <th>Обновлено</th>
                    </tr>
                    {% for game in games %}
                        <tr id="row{{ forloop.counter }}">
                            <td class="checkbox">
                                <input class="listcheckbox" type="checkbox" name="list" value="{{ game.key }}" id="checkbox{{ forloop.counter }}" onclick="updateHighlight(this, document.getElementById('row{{ forloop.counter }}'))"/>
                            </td>
                            <td class="main">
                                <div class="name">
                                    <a {% if not game.archived %}class="active"{%endif %} 
                                        href="/game/?id={{ game.key|stringformat:"s"|urlencode }}">{{ game.get_box.name|escape }}</a>
                                </div>
                            </td>
                            <td class="members">
                                {% for member in game.get_users %}
                                    {% ifequal member.email user.email %}
                                        Я
                                    {% else %}
                                        {{ member.nickname }}
                                    {% endifequal %}
                                    {% if not forloop.last %}/{% endif %}
                                {% endfor %}
                            </td>
                            <td class="date">
                                {{ game.updated|date:"H:i d/m" }}
                            </td>
                        </tr>
                    {% endfor %}
                </table>
            <div class="buttons bottom">
                <div class="left corner"></div>
                <div class="right corner"></div>
                <span class="button"><input type="submit" name="close" value="Завершить"/></span>
                <span class="button"><input type="submit" name="delete" value="Удалить"/></span>
            </div>
                {% if not games %}
                    <div class="message">У вас нет игр. Создайте новую или присоединитесь <a href="/all/">текущим</a>.</div>
                {% else %}
                    {% ifequal request.path '/' %}
                        <div class="message">Показаны только игры с вашим участием. <a href="/all/">Показать все</a></div>
                    {% else %}
                        <div class="message">Показаны все игры. <a href="/">Показать мои</a></div>
                    {% endifequal %}
                {% endif %}
            </div>
        </div>
    </form>


    <div id="gameform_dialog" class="dialog" style="display: none">
        <div class="title">Новая игра</div>
        <div class="content">
            <form action="/new/" method="post" id="gameform">
                <div class="form">
                    <input type="hidden" name="game" value=""/>
                    <div class="field">
                        <div class="name">Тип игры</div>
                        <div class="value">
                            <select name="type">
                                {% for v in game_boxes.values %}
                                    <option value="{{ v.type }}">{{ v.name }}</option>
                                {% endfor %}
                            </select>
                        </div>
                    </div>
                    <div class="buttons">
                        <span class="button">
                            <input type="submit" name="action" value="Создать игру"/>
                        </span>
                        <span class="button">
                            <input type="button" value="Cancel" onclick="DialogBox.instance().close()"/>
                        </span>
                    </div>
                </div>
            </form>
        </div>
    </div>

{% endblock %}

